<template>
	<view class="content">
		<view class="section-pop">
			<view class="form-item">
				<view class="label">作业类型</view>
				<view class="input"><u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入作业类型" v-model="form.work_type"></u--input></view>
			</view>
			<view class="form-item">
				<view class="label">风险等级</view>
				<view class="input"><u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入风险等级" v-model="form.risk_level"></u--input></view>
			</view>
			<view class="form-item">
				<view class="label">作业部位</view>
				<view class="input"><u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入作业部位" v-model="form.work_position"></u--input></view>
			</view>
			<view class="form-item">
				<view class="label">作业票名称</view>
				<view class="input"><u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入作业票名称" v-model="form.work_name"></u--input></view>
			</view>
			<view class="form-item">
				<view class="label">地址位置</view>
				<view class="input"><u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入地址位置" v-model="form.address"></u--input></view>
			</view>
			<view class="form-item">
				<view class="label">计划开始时间</view>
				<view class="input"><view class="input-body" @click="handleShowTime('start_time')">{{form.start_time}}</view></view>
			</view>
			<view class="form-item">
				<view class="label">计划完成时间</view>
				<view class="input"><view class="input-body" @click="handleShowTime('end_time')">{{form.end_time}}</view></view>
			</view>
			<view class="form-item">
				<view class="label">实际开始时间</view>
				<view class="input"><view class="input-body" @click="handleShowTime('start_time_real')">{{form.start_time_real}}</view></view>
			</view>
			<view class="form-item">
				<view class="label">实际完成时间</view>
				<view class="input"><view class="input-body" @click="handleShowTime('end_time_real')">{{form.end_time_real}}</view></view>
			</view>
			<view class="form-item">
				<view class="label">管控措施</view>
				<view class="input"><u--textarea placeholderClass="input-placeholder" class="text-body" placeholder="请输入管控措施" v-model="form.gk_measure"></u--textarea>
				</view>
			</view>
			<view class="form-item">
				<view class="label">流程状态</view>
				<view class="input"><u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入流程状态" v-model="form.lc_status"></u--input>
				</view>
			</view>
		</view>
		
		<view class="custom-button custom-button-shadow" @click="submit">
			提交
		</view>
		
		<u-datetime-picker
			:show="showTime" 
			closeOnClickOverlay 
			mode="date"
			v-model="timeStamp"
			@confirm="confirmTime" 
			@cancel="showTime = false" 
			@close="showTime = false">
		</u-datetime-picker>
	</view>
</template>

<script>
	import {
		addRiskApi
	} from '@/api/risk.js'
	import { mapGetters, mapActions} from 'vuex';
	import timeLine from '@/components/time_line/index.vue';
	export default {
		components: { timeLine },	
		data() {
			return {
				name: '',
				id: '',
				list: [],
				showPop: false,
				form: {},
				type: 'add',
				info: {},
				showTime: false,
				timeType: '',
				timeStamp: Number(new Date())
			};
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
			})
		},
		methods:{
			confirmTime(val) {
				const timeStamp = val.value;
				this.form[this.timeType] = this.formatDate(timeStamp);
				this.closeShowTime();
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate() < 10? '0' + date.getDate() : date.getDate();
				const h = date.getHours() < 10? '0' + date.getHours() : date.getHours();
				const m = date.getMinutes() < 10? '0' + date.getMinutes() : date.getMinutes();
				const s = date.getSeconds() < 10? '0' + date.getSeconds() : date.getSeconds();;
				return Y + M + D;
			},
			handleShowTime(type) {
				this.timeType = type;
				this.showTime = true;
			},
			closeShowTime() {
				this.showTime = false;
			},
			submit() {
				let obj = {};
				obj = {
					project_name: this.curProject.project_name,
					project_id: this.curProject.id,
					...this.form,
				}
				this.addRisk(obj);
			},
			addRisk(obj) {
				uni.showLoading({
					title: '加载中...'
				});
				addRiskApi({...obj}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon: 'success'
						});
						uni.hideLoading();
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: '操作失败',
							duration: 1000,
							icon: 'error'
						});
						uni.hideLoading();
					}
				});
			},
			clearForm() {
				for (let key in this.form) {
					this.form[key] = ''
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	
		.section-pop {
			width: 100%;
			border-radius: 50rpx;
			padding-top: 50rpx;
			padding-bottom: 50rpx;
		}
		.form-item {
			width: 750rpx;
			line-height: 48rpx;
			margin: 0 auto;
			margin-bottom: 25rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 40rpx;
			&:last-child {
				margin-bottom: 34rpx;
			}
		
			&.upload-wrap {
				align-items: unset;
				height: unset;
				line-height: unset;
			}
		
			@include clear();
		
			.label {
				float: left;
				width: 160rpx;
				height: 48rpx;
				text-align: left;
				line-height: 44rpx;
				font-size: 26rpx;
				color: #46464a;
			}
		
			/deep/ .u-upload__wrap {
				// width: calc(100% - 206rpx) !important;
				width: calc(100%) !important;
				background-color: transparent;
			}
		
			.icon-tupian {
				position: absolute;
				right: 25rpx;
				line-height: 44rpx;
				color: #1534ce;
				font-size: 28rpx;
			}
		
			/deep/ .u-radio-label--left {
				margin-right: 55rpx;
			}
		
			/deep/ .u-radio__text {
				font-size: 26rpx !important;
				color: #46464a !important;
			}
		
			.input {
				float: left;
				width: calc(100% - 134rpx - 3rpx - 30rpx);
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
		
				.input-body {
					box-sizing: border-box;
					width: 100%;
					height: 44rpx;
					padding: 0 !important;
					border: none;
					padding-left: 30rpx !important;
					padding-right: 30rpx !important;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44rpx;
					/deep/ .uni-input-input{
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.8);
					}
				}
				
				.text-body {
					box-sizing: border-box;
					width: 100%;
					padding: 0 !important;
					border: none;
					padding-left: 30rpx !important;
					padding-right: 30rpx !important;
					padding-top: 15rpx;
					padding-bottom: 15rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.8);
					line-height: 30rpx;
					border-radius: 20rpx;
					/deep/ .uni-textarea-textarea{
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.8);
					}
				}
		
				.input-placeholder {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}
		
		}
	
	
	.content{
		background-color: #fff;
	}
	.custom-button-wrapper{
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 40rpx;
		position: fixed;
		bottom: 30rpx;
		z-index: 99;
		.custom-button{
			width: 250rpx;
			box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
		}
	}
	.section-0{
		width: 100%;
		background-color: #3a5df5;
		.section-body{
			padding-top: 50rpx;
			.peoject-name{
				margin-bottom: 65rpx;
				width: 100%;
				height: 158rpx;
				background-color: #ffffff;
				border-radius: 35rpx;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				.title{
					width: 533rpx;
					height: 50rpx;
					padding-top: 15rpx;
					line-height: 50rpx;
					border-bottom: solid 3rpx #f2f2f0;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #8497ac;
					margin-left: 35rpx;
				}
				.name{
					box-sizing: border-box;
					padding: 0 35rpx;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #46464a;
					.iconfont{
						float: right;
						font-size: 30rpx;
						color: #3b3c40;
					}
				}
			}
			box-sizing: border-box;
			width: 100%;
			padding-left: 40rpx;
			padding-right: 40rpx;
			padding-bottom: 100rpx;
			background-color: #fff;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
		}
	}
</style>